

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="/assets/js/moment.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.js"></script>

<style type="text/css">
    .sm-st {
        background: #fff;
        padding: 20px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        margin-bottom: 20px;
        -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
        box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
    }

    .sm-st-icon {
        width: 60px;
        height: 60px;
        display: inline-block;
        line-height: 60px;
        text-align: center;
        font-size: 30px;
        background: #eee;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        float: left;
        margin-right: 10px;
        color: #fff;
    }

    .sm-st-info {
        font-size: 12px;
        padding-top: 2px;
    }

    .sm-st-info span {
        display: block;
        font-size: 24px;
        font-weight: 600;
    }

    .orange {
        background: #fa8564 !important;
    }

    .tar {
        background: #45cf95 !important;
    }

    .sm-st .green {
        background: #86ba41 !important;
    }

    .pink {
        background: #AC75F0 !important;
    }

    .yellow-b {
        background: #fdd752 !important;
    }

    .stat-elem {

        background-color: #fff;
        padding: 18px;
        border-radius: 40px;

    }

    .stat-info {
        text-align: center;
        background-color: #fff;
        border-radius: 5px;
        margin-top: -5px;
        padding: 8px;
        -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
        box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
        font-style: italic;
    }

    .stat-icon {
        text-align: center;
        margin-bottom: 5px;
    }

    .st-red {
        background-color: #F05050;
    }

    .st-green {
        background-color: #27C24C;
    }

    .st-violet {
        background-color: #7266ba;
    }

    .st-blue {
        background-color: #23b7e5;
    }

    .stats .stat-icon {
        color: #28bb9c;
        display: inline-block;
        font-size: 26px;
        text-align: center;
        vertical-align: middle;
        width: 50px;
        float: left;
    }

    .stat {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
    }

    .stat .value {
        font-size: 20px;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 500;
    }

    .stat .name {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .stat.lg .value {
        font-size: 26px;
        line-height: 28px;
    }

    .stat.lg .name {
        font-size: 16px;
    }

    .stat-col .progress {
        height: 2px;
    }

    .stat-col .progress-bar {
        line-height: 2px;
        height: 2px;
    }

    .item {
        padding: 30px 0;
    }


    #statistics .panel {
        min-height: 150px;
    }

    #statistics .panel h5 {
        font-size: 13px;
    }

    .table>thead>tr {
        border:solid #000 1px;
    }
    .table>thead>tr>th {
        text-align: center;
        border:solid #000 1px;
    }
    .table>tbody>tr>td {
        text-align: center;
        border:solid #000 1px;
    }
</style>
<div class="panel panel-default panel-intro">
    <div class="panel-body">
        <div style="margin-left: 20px"><h3>{$configInfo['params_name']}--{$configInfo['Name']}</h3></div>
        <div class="row">
            <!--日期选择-->
            <div class="row" style="margin-bottom: 20px; margin-left: 20px">
                <form  id="searchForm" action="{:url('task_result_analyze/analyzeChart')}" method="get">
                    <input type="hidden" name="config_id" value="{$config_id}">
                    <div class="form-group">
                        <label  class="col-sm-1 control-label">时间选项</label>
                        <label class="radio-inline">
                            <input type="radio" name="time" id="inlineRadio1" checked value="day"> 当日
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="time" id="inlineRadio2"  value="week"> 本周
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="time" id="inlineRadio3" value="last7day"> 最近7天
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="time" id="inlineRadio4"  value="month"> 本月
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="time" id="inlineRadio5"  value="last30day"> 最近30天
                        </label>
                        <!--<label class="radio-inline">
                            <input type="text" class="form-control" style="width: 300px;" id="daterange_3" name="date" placeholder="请选择日期" value="">
                        </label>-->
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-1 control-label">统计项</label>
                        <label class="radio-inline">
                            <input type="radio" name="type" id="task1" checked value="exposure"> 曝光(exposure)
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="type" id="task2" value="task"> 任务(task)
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="type" id="task3" value="task_find"> 查找(find)
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="type" id="task4" value="task_click"> 点击(click)
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="type" id="task5" value="task_load"> 加载(load)
                        </label>
                        <button type="button" id="search3" class="btn btn-default">查询</button>
                    </div>

                </form>
            </div>

        </div>
        <div class="row table-responsive">
            <div id="echart10" style="width: 100%;height:400px;"></div>
        </div>

        <div class="row table-responsive">
            <div id="table01" style="width: 100%;">
                <table class="table table-bordered">
                    <thead>
                        <tr id="table01_th"></tr>
                    </thead>
                    <tbody>
                        <tr id="table01_tr"></tr>
                    </tbody>

                </table>
            </div>
        </div>
        <div class="row table-responsive">
            <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                   data-operate-edit="{:$auth->check('task_config/edit')}"
                   data-operate-del="{:$auth->check('task_config/del')}"
                   width="100%">
            </table>
        </div>
    </div>
</div>

<script>

    $(function() {
        $('input[name="date"]').daterangepicker({
            // singleDatePicker: true,
            opens: 'left',
            maxDate:moment(),
            locale: {
                format:'YYYY-MM-DD'
            }
        }, function(start, end, label) {
        });
        getAnalyzeChart();

        $('#search3').click(function(){
            getAnalyzeChart()
        })

        function getAnalyzeChart(){
            var form = $('#searchForm');
            $.ajax({
                url:form.attr('action'),
                type:'get',
                data:form.serialize(),
                dataType:"JSON",
                success:function(res){
                    var data = res.data;
                    const legend = [];
                    for (const l in data.chartX) {
                        legend.push(data.chartX[l]);
                    }
                    const series = [];
                    for (const key in data.chartData) {
                        const obj = {};
                        obj.name = data.chartX[key];
                        obj.type = 'line';
                        obj.data = data.chartData[key];
                        series.push(obj);
                    }
                    initChart(data.xAxis,legend,series);
                    var th='';
                    var tr = '';
                    for (const thd in data.column){
                        th += '<th>'+data.column[thd]+'</th>';
                        tr += '<td>'+data.data[0][thd]+'</td>';
                    }
                    $('#table01_th').html(th);
                    $('#table01_tr').html(tr);
                }
            })
        }
        var chartDom = document.getElementById('echart10');
        var myChart = echarts.init(chartDom);
        function initChart(xAxis,legend,series){
            var option;
            option = {
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                grid: {
                    left: 10,
                    right: 10,
                    bottom: 20,
                    top: 30,
                    containLabel: true,
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                    },
                    padding: [5, 10],
                },
                legend: {
                    data: legend
                },
                xAxis: {
                    type: 'category',
                    data: xAxis
                },
                yAxis: {
                    type: 'value'
                },
                series: series
            };
            option && myChart.setOption(option);
        }
        window.onresize = function() {
            myChart.resize();
        };


    });

</script>

<script>
    //加载层-风格4
    $("#search3").on('click',function () {
        layer.msg('加载中', {
            icon: 16
            ,shade: 0.01
        });
    })

</script>


